iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 26
0
Modern Web

JavaScript 忍者的修練--從下忍進階到中忍系列 第 26

Day 26: 正規表達式的方法

  • 分享至 

  • xImage
  •  

正規表達式自己有testexec二個方法,搭配字串的matchsearchreplace等方法,可以有強大的功能。

<div class="foo bar"></div>
<div class="bar foo"></div>
<div></div>
<span class="foo bar baz"></span>
<script>
	function findClassInElements(className, type) {
		const elems = document.getElementsByTagName(type || "*");
		const regex = new RegExp("(^|\\s)" + className + "\\s|$");
		const results = [];
		for (let i = 0; i < elems.length; i++) {
			if (regex.test(elems[i].className)) {
				results.push(elems[i]);
			}
		}
		return results;
	}
	console.log(findClassInElements("foo", "div").length); // 2
	console.log(findClassInElements("foo", "span").length); // 1
	console.log(findClassInElements("foo").length); // 3
</script>

這裡我們自建一個 HTML 搜尋器,可以找出頁面上有指定 class name 的 HTML 元素。

我們先用getElementsByTagName抓取指定的 HTML 標籤,如果沒有這個參數的話就抓頁面上全部元素,存在elems的陣列裡。

然後我們根據參數裡的 class name 建立正規表達式。Class name 是寫在 HTML 元素的class屬性裡,但是我們不能確定它的順序,不過可以歸納出這些規則:

  • 出現在第一個的時候,class name 前面沒有空格,但後面有。
  • 出現在最後一個的時候,class name 前面有空格,但後面沒有。
  • 出現在中間的時候,class name 前後都有空格。
  • 唯一的 class name 時,前後都不會有空格。

事實上只是 class name 前後有沒有空格的問題,所以正規表達式就是"(^|\\s)" + className + "\\s|$"。又因為 class name 要等到函式被呼叫時才會知道,正規表達式就不能用實質方式建立,必須用new RegExp()動態產生,此時規則要以字串方式代入。我們又用了\s代表空白符號,反斜線在字串裡出現代表要 escape 緊跟在後的字元,但是我們要保留\s當中的反斜線,所以要在前面加上反斜線來 escape 它。這是用字串建立正規表達式比較麻煩的地方。

接著建一個空陣列來保管等一下匹配到的結果。

我們將elems陣列裡的 HTML 元素丟進迴圈裡,檢查每個元素的className是否匹配我們的正規表達式。在這裡使用正規表達式的test方法,如果有匹配到會回傳true,反之回傳false。將有匹配到的元素存進results陣列裡。


上一篇
Day 25: 正規表達式實做
下一篇
Day 27: JavaScript 模組化
系列文
JavaScript 忍者的修練--從下忍進階到中忍30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言